<template>
  <view class="contenter">
    <change-times :type="1" @confirm="confirm"></change-times>
    <view class="sreach u-flex flex_bt" >
      <view class="u-flex">
        <view class="icon">
          <u-icon name="search"  color="#999999" size="30"></u-icon>
        </view>
        <view>
          <u-input :clearable="false" v-model="search" placeholder="用户姓名/电话" type="text" :border="false" :height="68" />
        </view>
      </view>
      <view class="change" @click="searchChange">搜索</view>
    </view>
    <scroll-view scroll-y style="height: 1040rpx;width: 100%;" @scrolltolower="onreachBottom">
      <view class="item " v-for="(data,index) in list" :key="index">
        <view class="orderHao">订单编号：{{data.apporderid}}</view>
        <view class="flex con">
          <view>
            <item-image  :img="data.image" :height="160" :width="160"    :fade="false"/>
          </view>
          <view class="nei flex flex-column flex_bt">
            <view class="name">{{data.sname}}</view>
            <view class="time">预约时间：{{data.otime}}</view>
          </view>
        </view>
        <view class="hexiao">核销时间：{{data.createdate}}</view>

      </view>
      <view class="loading_text">
        <text>{{loadingText || '暂无数据'}}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import ChangeTimes from "../../components/item/changeTimes";
export default {
name: "index",
  components: {ChangeTimes},
  data(){
    return{
      search:'',
      loadingText:'',
      list:[],
      allpage:'',
      month:'',
      page:1,
    }
  },
  onLoad(){
    this.setData()
  },
  methods:{

    //时间选择
    confirm(time){
      this.page = 1
      this.loadingText = ''
      this.list = []
      this.month = time
      this.setData()
    },
    setData(){
      let form = {
        month:this.month ,
        seach:this.search,
        limit:10,
        page:this.page || 1
      }
      let that = this
      this.$api.serviceHistory(form).then(res => {
        this.allpage = res.data.last_page
        that.list = [...that.list,...res.data.data]
      })
    },
    //搜索
    searchChange(){
      this.page = 1
      this.loadingText = ''
      this.list = []
      this.setData()
    },

    onreachBottom(){
      if(this.page>=this.allpage){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.page ++
      this.setData()
    },
  }
}
</script>

<style scoped lang="scss">
  .contenter{
    margin:0 32rpx;
    .sreach{
      background: white;
      margin-top: 20rpx;
      height: 80rpx;
      border-radius: 8rpx;
      padding: 0 20rpx;
      .icon{
        margin-right: 16rpx;
      }
      .change{
        font-size: 28rpx;
        font-weight: bold;
        color: #0F4C3A;
      }
    }
    .item{
      background: white;
      padding: 32rpx 0;
      margin-top: 20rpx;
      .orderHao{
        font-size: 24rpx;
        color: #898989;
        padding-left: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 2rpx solid  #F2F2F2;
      }
      .con{
        border-bottom: 2rpx solid  #F2F2F2;
        padding: 20rpx;
        .nei{
          margin-left: 20rpx;
          font-size: 24rpx;
          color: #555555;
          .name{
            font-size: 32rpx;
            color: #3B3B3B;
            font-weight: bold;
          }
          .time{
            color: #959595;
            font-size: 28rpx;
          }
        }
      }
      .hexiao{
        color: #4B4B4B;
        font-size: 28rpx;
        padding-top: 20rpx;
        padding-left: 20rpx;
      }
    }
  }
</style>